import { isNumber } from "@/utils";
import { Grid } from "@arco-design/web-react";
import type { PropsWithChildren, ReactNode } from "react";
import type { Breakpoint } from "../types";
import { type SvContextType, useSvContext } from "./context";

type SvProps = PropsWithChildren<
	SvContextType & {
		label: ReactNode;
	}
>;

const TOTAL_COLUMNS = 24;

export default function Sv({
	children,
	col,
	labelWidth,
	label,
}: SvProps): ReactNode {
	const context = useSvContext();

	const seCol = col ?? context?.col ?? 1;

	const breakpointCols: Record<Breakpoint, number> = {} as Record<
		Breakpoint,
		number
	>;
	if (!isNumber(seCol)) {
		for (const k of Object.keys(seCol)) {
			breakpointCols[k as Breakpoint] = TOTAL_COLUMNS / seCol[k as Breakpoint]!;
		}
	}
	const colProps = {
		span: isNumber(seCol) ? TOTAL_COLUMNS / seCol : undefined,
		...breakpointCols,
	};

	const seLabelWidth = labelWidth ?? context?.labelWidth ?? 90;

	return (
		<Grid.Col {...colProps}>
			<div
				className="arco-descriptions-item-label"
				style={{ width: seLabelWidth }}
			>
				{label}
			</div>
			<div className="arco-descriptions-item-value">{children}</div>
		</Grid.Col>
	);
}
